L.AnimatedMarker = L.Marker.extend({
    options: {
        interval: 1000,
        playCall: null
    },

    initialize: function(latlng, options) {
        Object.assign(this.options, options);
        this.isZooming = false;
        L.Marker.prototype.initialize.call(this, latlng, options);
        this.resetIcon()
    },

    resetIcon: function() {
        const v = this
        var iconOption = v.options.icon.options
        var Icon = L.DivIcon.extend({
            createIcon: function() {
                // outerDiv.style.transform is updated by Leaflet
                var outerDiv = document.createElement('div');
                outerDiv.style.width = iconOption.iconSize[0] + "px"
                outerDiv.style.height = iconOption.iconSize[1] + "px"
                outerDiv.style.position = "absolute"
                v.div = document.createElement('div');
                v.div.style.width = iconOption.iconSize[0] + "px"
                v.div.style.height = iconOption.iconSize[1] + "px"
                v.div.style.transition = 'transform linear 100ms'
                v.div.style.transformOrigin = 'center'
                v.div.style.transform = 'translate3d(-' + iconOption.iconAnchor[0] + 'px, -' + iconOption.iconAnchor[0] + 'px, 0)';
                const img = document.createElement('img');
                img.src = iconOption.iconUrl;
                img.width = iconOption.iconSize[0];
                img.height = iconOption.iconSize[1];
                v.div.appendChild(img);
                outerDiv.appendChild(v.div);
                return outerDiv;
            },
            rotate(deg) {
                if ((v.before && (Math.abs(v.before - deg) >= 180))) {
                    v.div.style.transition = 'none'
                } else {
                    v.div.style.transition = 'transform linear 100ms'
                    // var _speed = 100 / v.options.speetX + 'ms'
                    // v.div.style.transition = 'transform linear ' + _speed
                }
                v.div.style.transform = 'translate3d(-19px, -13px, 0) rotate(-' + deg + 'deg)';
                v.before = deg
            },
            iconSize: iconOption.iconSize,
        })
        this.icon = new Icon()
        this.setIcon(this.icon)
    },

    onAdd: function(map) {
        L.Marker.prototype.onAdd.call(this, map);
        this.animate()
        this.map = map;
        const _this = this
        map.addEventListener('zoomstart', function() {
            _this.isZooming = true;
        });
        map.addEventListener('zoomend', function() {
            _this.isZooming = false;
        });

        // Start animating when added to the map
        if (this.options.autoStart) {
            this.start();
        }
    },
    animate: function(latlngs) {
        var now = Date.now();
        var end = this.startedAt + this.interval;
        if (now < end || this.getLatLng().distanceTo(latlngs[1]) < latlngs[1].distanceTo(latlngs[0])) {
                requestAnimationFrame(this.animate.bind(this));
        }
        this.checkZooming(latlngs)
    },



    // Start the animation
    add_latlngs: function(latlngs) {
        // var routeLine = L.polyline(latlngs);
        // var line_latlngs=routeLine.getLatLngs()
        bearing = this.getRotation(latlngs[0], latlngs[1])
        this.icon.rotate(bearing);
        this.animate(latlngs)

    },
    // 解决地图缩放是图标会偏移轨迹线问题
    checkZooming: function (latlngs){
        if (!this.isZooming && this.map) {
            var t = now - this.startedAt;
            if (t > this.interval){ // 解决结束时小车位置超出终点问题
                t = this.interval
            }
            var lat = latlngs[0].lat + ((latlngs[1].lat - latlngs[0].lat) / this.interval * t);
            var lng = latlngs[0].lng + ((latlngs[1].lng - latlngs[0].lng) / this.interval * t);
            this.setLatLng({
                lat: lat,
                lng: lng
            });
            // 用于动态轨迹线展示
            if (this.options.playCall) {
                this.options.playCall({
                    lat: lat,
                    lng: lng
                })
            }
        }
    },
    getRotation: function(start, end) {
        var dx = end.lng - start.lng;
        var dy = end.lat - start.lat;
        var radian = Math.atan2(dy, dx); //弧度值
        var rotation = 180 * radian / Math.PI //转换为角度值
        if (rotation > -180 && rotation < 0) {
            rotation = 360 + rotation;
        }
        return rotation
    }

});

L.animatedMarker = function(latlngs, options) {
    return new L.AnimatedMarker(latlngs, options);
};